<template>
	<view>
		<!-- <u-navbar :is-back="false" title="　" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
					<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
				</view>
			</view>
		</u-navbar> -->
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10" @click="headIconClick">
				<!-- <u-avatar src="../../static/mine/touxiang.png" size="140"></u-avatar> -->
				<image src="../../static/mine/touxiang.png" style="width: 140rpx;height: 140rpx;" v-if="!userInfo.avatarUrl"></image>
				<image :src="userInfo.avatarUrl" style="width: 140rpx;height: 140rpx;border-radius: 70rpx;" v-if="userInfo.avatarUrl"></image>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{userInfo.NickName || '游客'}}</view>
				<!-- <view class="u-font-14 u-tips-color">微信号:helang_uView</view> -->
			</view>
			<view class="u-m-l-10 u-p-10" @click="scan">
				<u-icon name="scan" color="#969799" size="28"></u-icon>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		
		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="rmb-circle" title="支付"></u-cell-item>
			</u-cell-group>
		</view> -->
		
		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item icon="star" title="收藏"></u-cell-item> -->
				<!-- <u-cell-item icon="photo" title="相册"></u-cell-item> -->
				<!-- <u-cell-item icon="coupon" title="开具发票" @click='invoicing'></u-cell-item> -->
				<!-- <u-cell-item icon="heart" title="关注"></u-cell-item> -->
				<u-cell-item icon="setting" title="修改字体大小" @click='bigFont'></u-cell-item>
				<!-- <u-cell-item icon="file-text" title="实名认证" @click='realName'></u-cell-item> -->
				<u-cell-item icon="man-add" title="乘车人" @click='passagerInfo'></u-cell-item>
				<!-- #ifdef MP-WEIXIN -->
				<u-cell-item icon="attach" title="绑定手机号" @click='bindPhoneNum'></u-cell-item>
				<!-- #endif -->
				<!-- <navigator url="./userManual/userManual">
					
				</navigator> -->
				<u-cell-item icon="order" title="使用手册" @click="userManual"></u-cell-item>
				<u-cell-item icon="heart" title="小程序推广码" @click="JsCodeClick"></u-cell-item>
				<!-- #ifdef APP -->
				<u-cell-item icon="edit-pen" title="修改密码" @click='setPassWord'></u-cell-item>
				<u-cell-item icon="reload" title="登录登出" @click='longin'></u-cell-item>
				<!-- #endif -->
			</u-cell-group>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<jh-mine-authorize></jh-mine-authorize>
		<!-- #endif -->
		<u-popup v-model="showJsCode" mode="center" border-radius="14">
			<scroll-view scroll-y="true">
				<view class="flex flex-col flex-jc flex-ac" @click.native="refreshJsCode">
						<view>
							<canvas id="JsCode" canvas-id="JsCode"
								style="width: 350rpx;height: 350rpx;margin-left: 50rpx;margin-top: 50rpx;" />
						</view>
				</view>
				<view style="font-size: 32rpx;padding: 0rpx 10rpx 20rpx 85rpx;">推广人数:{{PromoterNum}}人 </view>
			</scroll-view>
		</u-popup>
		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="设置"></u-cell-item>
			</u-cell-group>
		</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var _self;
	import jhMineAuthorize from '@/components/jh-mineAthorize/jh-mineAthorize.vue';
	import uQRCode from '../../js_sdk/Sansnn-uQRCode/uqrcode/common/uqrcode.js';
	export default {
		components:{
			jhMineAuthorize
		},
		data() {
			return {
				pic:'https://uviewui.com/common/logo.png',
				showJsCode:false,
				show:true,
				userInfo:[],
				isAuthorize:false,
				openid:'',
				PromoterNum:0
			}
		},
		onReady() {
			_self.getJsCode("https://zhcxservice.145u.net?openid="+_self.openid);
		},
		onLoad() {
			_self = this;
			// #ifdef MP-WEIXIN
			//监听授权状态
			uni.$on('changeAuthorize',function(data){
				console.log(data);
				_self.isAuthorize = data.data;
				uni.getStorage({
					key:'userInfo',
					success(data) {
						console.log(data);
						_self.userInfo = data.data;
					}
				})
				uni.$off('changeAuthorize');
			});
			// #endif 
		},
		onShow() {
			//获取授权状态
			// #ifdef MP-WEIXIN
			_self.isAuthorize = uni.getStorageSync('isAuthorize');
			// #endif
			_self.userInfo = uni.getStorageSync('userInfo');
			console.log('12',_self.userInfo,_self.isAuthorize);
			uni.getStorage({
				key: 'WXOpenID',
				success(res) { 
					console.log(res);
					_self.openid = res.data;
				}
			})
		},
		methods: {
			JsCodeClick:function(){
				_self.showJsCode = true;
				_self.GetPromoterNum();
			},
			//-----------------------------------更新二维码信息-----------------------------------
			refreshJsCode: function() {
				_self.getJsCode("https://zhcxservice.145u.net?openid="+_self.openid);
			},
			getJsCode(JsCode) {
				console.log('1231',JsCode);
				uQRCode
					.make({
						canvasId: 'JsCode',
						componentInstance: this,
						size: uni.upx2px(300),
						margin: 0,
						text: JsCode,
						backgroundColor: '#ffffff',
						foregroundColor: '#333333',
						fileType: 'png',
						errorCorrectLevel: uQRCode.errorCorrectLevel.H
					})
					.then(res => {
						console.log(res);
					});
			},
			//---------------------------------------------快捷弹窗---------------------------------------------
			showToast: function(title, type) {
				_self.$refs.uToast.show({
					title: title,
					type: type
				})
			},
			headIconClick:function(){
				// #ifdef MP-WEIXIN
				_self.getAuthorizeState();
				// #endif
			},
			//-------------------------------判断是否授权-------------------------------
			getAuthorizeState:function(){
				if(!_self.isAuthorize){
					uni.$emit('getMineAuthorize', {
					    data: '授权'
					});
				}
			},
			//-------------------------------扫描-------------------------------
			scan:function(){
				uni.scanCode({
				    scanType: ['barCode','qrCode'],
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						if(res.result){
							
						}
				    }
				});
			},
			//-------------------------------使用手册-------------------------------
			userManual:function(){
				uni.navigateTo({
					url:'userManual/userManual'
				})
			},
			//-------------------------------开具发票-------------------------------
			invoicing:function(){
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url:'/pages_IntercityExpress/Invoicing/Invoicing'
				})
				// #endif
			},
			//-------------------------------设置字体大小-------------------------------
			bigFont:function(){
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url:'setFontSize/setFontSize'
				})
				// #endif
			},
			//-------------------------------修改密码-------------------------------
			setPassWord:function(){
				uni.navigateTo({
					url:'setPassWord/setPassWord'
				})
			},
			//-------------------------------实名认证-------------------------------
			realName:function(){
				uni.navigateTo({
					url:'realNameAuthentication/realNameAuthentication'
				})
			},
			//-------------------------------乘车人信息-------------------------------
			passagerInfo:function(){
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url:'Passenger/PassengerList'
				})
				// #endif
			},
			//-------------------------------登录/登出---------------------------------
			longin:function(){
				console.log(_self.userInfo);
				
				if(_self.userInfo){
					uni.showModal({
						title:'温馨提示',
						content:'是否确定退出登录？',
						success(res) {
							if(res.confirm){
								uni.removeStorage({
								    key: 'userInfo',
								    success: function (res) {
								        console.log('success');
										_self.userInfo = '';
										_self.showToast('退出成功', 'success');
								    }
								});
							}
						}
					})
				}else{
					uni.showModal({
						title:'温馨提示',
						content:'您已退出，是否重新登录？',
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'../Login/Login'
								})
							}
						}
					})
				}
			},
			bindPhoneNum:function(){
				// #ifdef MP-WEIXIN
				if(_self.isAuthorize){
					uni.showModal({
						title:'绑定手机号',
						editable:true,
						placeholderText:'请输入手机号',
						success(res) {
							console.log(res);
							if(res.confirm){
								if(res.content){
									console.log(123);
									if(res.content.length != 11){
										_self.showToast('手机号有误，请重新输入', 'warning');
									}else{
										uni.getStorage({
											key:'WXOpenID',
											success(openidData) {
												console.log(openidData);
												_self.GetUserByPhoneNumber(res.content,openidData.data);
											}
										})
									}
								}else {
									_self.showToast('手机号为空，绑定失败', 'error');
								}
							}
						}
					})
				}else {
					_self.getAuthorizeState();
				}
				// #endif
			},
			GetPromoterNum:function(){
				console.log("GetPromoterNum",_self.$h.expressInterface.expressInterface.appSystemCode
							.appSystemCode,_self.userInfo.Id);
				uni.request({
					url: _self.$h.expressInterface.expressInterface.GetPromoterNum.url,
					method: _self.$h.expressInterface.expressInterface.GetPromoterNum.method,
					header: _self.$h.expressInterface.expressInterface.GetPromoterNum.header,
					data: {
						appSystemCode: _self.$h.expressInterface.expressInterface.appSystemCode
							.appSystemCode,
						PromoterID: _self.userInfo.Id,
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading();
						if(res.data.Success){
							var Promoters = JSON.parse(res.data.Data);
							_self.PromoterNum = Promoters.length;
						}else{
							_self.showToast(res.data.Message, 'error');
						}
					},
					fail(res) {
						uni.hideLoading();
						console.log('获取推广返回信息',res);
					}
				});
			},
			//-------------------------------绑定手机号---------------------------------
			GetUserByPhoneNumber:function(PhoneNumber,openid){
				uni.showLoading({
					title:'正在绑定手机号...'
				})
				console.log('用户信息',_self.userInfo);
				uni.request({
					url: _self.$h.expressInterface.expressInterface.GetUserByPhoneNumber.url,
					method: _self.$h.expressInterface.expressInterface.GetUserByPhoneNumber.method,
					header: _self.$h.expressInterface.expressInterface.GetUserByPhoneNumber.header,
					data: {
						PhoneNumber:PhoneNumber,
						openid:openid
					},
					success: (res) => {
						uni.hideLoading();
						if(res.data.Success){
							// console.log('绑定手机号返回信息',res);
							var arr = JSON.parse(res.data.Data);
							// console.log(data);
							var userArr = {
								Id:arr.AID,
								NickName:arr.NickName,
								OpenId:openid,
								PhoneNumber:arr.PhoneNumber,
								SystemName:arr.SystemName,
								Name:arr.NickName,
								avatarUrl:_self.userInfo.avatarUrl
							}
							uni.setStorageSync('userInfo', userArr);
							_self.showToast('绑定手机号成功', 'success');
						}else{
							_self.showToast('绑定失败，请稍后重新绑定', 'error');
						}
					},
					fail(res) {
						uni.hideLoading();
						_self.showToast('绑定失败，请稍后重新绑定', 'error');
						console.log('绑定手机号返回信息',res);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
}
</style>
